<script setup lang="ts">

import {ref, onMounted, } from "vue";

const num = ref<string>("0");
const timer = ref<any>(null);
const liSize = ref<number>(90);
onMounted(()=>{
  startTime();
});

const startTime = () => {
  let n: number = 1;
  timer.value = setInterval(() => {
    num.value = new Intl.NumberFormat('en-US').format(n++);
  }, 1000);
};
const endTime = () => {
  clearInterval(timer.value);
}

</script>

<template>
  <div id="time">
    <ul>
      <li v-for="i in liSize" :key="i"></li>
    </ul>
    <ul>
      <li><span>{{ num }}</span></li>
      <li>切换计时</li>
      <li><span></span><span></span><span></span></li>
    </ul>
  </div>
</template>

<style lang="scss">

#time {
  --time-default-color: #105ba2; // 默认颜色
  --time-active-color: #1effcc;  // 激活颜色
  --time-water-color: #19a0c8;   // 水波颜色

  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  width: 16em;
  height: 16em;
  & > ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  & > ul:nth-child(1) {
    & > li {
      position: absolute;
      top: 47%;
      width: 0.2em;
      height: 1.5em;
      padding: 0;
      margin: 0;
      background: var(--time-default-color);
      border-radius: 0.1em;
      &:after {
        content: "";
        position: absolute;
        width: 0.2em;
        height: 1.2em;
        background-color: var(--time-active-color);
        border-radius: 0.1em;
      }
    }

    @for $i from 1 through 90 {
      & > li:nth-child(#{$i}) {
        transform:rotate(($i * 4) + deg) translateY(6em);
        &:after {
          animation: move-#{$i} 1s ease-in alternate infinite;
        }
      }
    }
  }

  & >ul:nth-child(2) {
    width: 10em;
    height: 10em;
    top: 51.8%;
    border: 0.2em solid var(--time-default-color);
    &:before{
      content: "";
      position: absolute;
      background-color: var(--time-active-color);
      width: 0.7em;
      height: 0.7em;
      border-radius: 0.7em;
      box-shadow: 0 0 1em var(--time-active-color);
      top: 1.2em;
      left: 0.8em;
      transform-origin: 4em 3.6em;
      box-sizing: border-box;
      animation: revolution 5s infinite linear;
    }
    &:after{
      content: "";
      position: absolute;
      width: 10em;
      height: 10em;
      box-sizing: border-box;
      border: 0.2em solid transparent;
      border-left: 1em solid var(--time-active-color);
      border-width: 0.2em 0em 0em 0.2em;
      border-radius: 10em;
      top: -0.2em;
      left: -0.2em;
      animation: revolution 5s infinite linear;
    }
    & > li {
      position: absolute;
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      background: none;
      &:before, &:after{
        width: 0;
        height: 0;
        background: none;
        transform: none;
        text-align: center;
        animation: none;
      }
    }
    & >li:nth-child(1) {
      top: 40%;
      & > span{
        background: linear-gradient(to bottom, var(--time-active-color) 0%, var(--time-default-color) 75%, var(--time-default-color) 100%);
        background-clip: text;
        color: transparent;
        font-size: 50px;
        font-weight: bold;
      }
    }
    & >li:nth-child(2) {
      top: 75%;
      font-size: 20px;
      font-weight: bold;
      color: var(--time-active-color);
    }
    & >li:nth-child(3) {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      animation: water-wave linear infinite;
      z-index: -1;
      & > span {
        position: absolute;
        top: 60%;
        background: var(--time-water-color);
        opacity: .3;
        width: 200%;
        height: 200%;
        animation: inherit;
      }
      @for $i from 1 through 3 {
        & > span:nth-child(#{$i}) {
          left: calc(-10% * #{$i} - 15%);
          border-radius: calc(45% - 5% * #{$i});
          animation-duration: calc(5s + 2s * #{$i});
        }
      }
    }
  }
}

@for $i from 1 through 90 {
  @keyframes move-#{$i} {
    0% {
      height: random(25) + px;
    }
    25% {
      height: random(25) + px;
    }
    50% {
      height: random(25) + px;
    }
    75% {
      height: random(25) + px;
    }
    100% {
      height: random(25) + px;
    }
  }
}

@keyframes revolution {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes  water-wave {
  0% {transform: rotate(0deg);}
  0% {transform: rotate(180deg);}
  100% {transform: rotate(360deg);}
}
</style>
